<template>
<div>
    <table>
        <tr>
            <td>用户名</td>
            <input type="text" v-model="username">
        </tr>
        <tr>
            <td>密码</td>
            <input type="password" v-model="phone">
        </tr>

        <Button type="submit" @click="login">登录</Button>

        

    </table>
</div>
    
</template>

<script>
export default {
    data () {
        return {
            username:'',
            phone:''
            
        }
    },
    methods: {
       login(){
            if(this.username==''){
                this.$Message('您没用输入用户名')
                return false
            }
            if(/^1[3578]\d{9}$/.test(this.phone)){
                }
            else{
                this.$Message('您输入的手机号码有误')
                return false
            }
             this.axios.get('http://127.0.0.1:8000/mylearn/loginview/',{params:{'username':this.username,'phone':this.phone}})
             .then(result=>{
                 if(result.data.code==200){
                     //登录成功
                     localStorage.setItem('username',result.data.username)
                     localStorage.setItem('uid',result.data.uid)
                     
                     this.$Message(result.data.msg)
                     this.$router.push('learngoods')
                 }
                 else{
                     this.$Message(result.data.msg)
                 }
                 console.log(result)
            
             })
       }
        
    },

}
</script>

<style>

</style>
页面简介：
table里面，登录框采用tr包裹一个td 和 输入框 的格式，验证了输入的手机号是否符合要求
数据库忘记加入密码字段，所以用的手机号代替密码
登录成功后，还从后端返回了一些数据，已被不时之需。登录成功后，还将输入的名字存入了
localStorage,并且跳转到商品页面